<template>
  <div class="app">
    <!-- 导航栏 -->
    <Navbar v-if="showNavbar" />
    
    <!-- 主要内容区域 -->
    <div :class="['main-content', { 'with-navbar': showNavbar }]">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Navbar from '@/components/layout/Navbar.vue'

const route = useRoute()

// 控制导航栏显示
const showNavbar = computed(() => {
  // 在咨询聊天页面和其他不需要导航栏的页面隐藏导航栏
  const hideNavbarPaths = [
    '/consultation/chat',
    '/login',
    '/register',
    '/admin'  // 后台管理页面也不显示前台导航栏
  ]
  return !hideNavbarPaths.some(path => route.path.includes(path))
})
</script>

<style>
.app {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  min-height: 100vh;
}

.main-content.with-navbar {
  padding-top: 64px;
}

/* 全局样式 */
:root {
  --el-color-primary: #409EFF;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 